<template>
	<div class="organizationPge">

		<mu-load-more  @load="load" :loading="loading">
			<div class="note" :style ="note"> 
				<div class="inform">
					<span>党的会议</span>
					<div class="menu" @click="Oclicks()">
						<img src="@as/img/zuzhi_wode_fl@2x.png" alt=""> 
						<span>分类</span>
					</div>
				</div>
				<div class="learnIndex">
					<ly-tab class="ly-tab" v-model="selectedId" :items="items" :options="options" @change="tabChange"></ly-tab>
				</div>
			</div>
			<Loading  v-if="notMore"  class="empty-text-wrap" />
				<div class="list">
					<div class="ol">
						<div class="bar" v-for="(item,index) in toStayInList" :key="index" @click="meetingDetails(item)">
							<div>
								<div class="time">
									<div class="bj" :style ="bj">
										<span class="year">{{item.years}}</span>
										<span class="day">{{item.day}}</span>
									</div>
								</div>
								<div class="info">
									<div class="title">
										<p>{{item.name}}</p>
									</div>
									<div class="rq">
										<p>{{(item.start_time) | time}}-{{(item.end_time) | time}}</p>
									</div>
								</div>
								<div class="pic">
									<img src="@as/img/dangwu_wode_zp@2x.png" alt="">
								</div>
							</div>
						</div>
					</div>
					<div class="loading" v-if="loadOver" :class="{'notPageOne':p>1}">{{loaded}}</div>
				</div>
			<div class="tab">
				<div class="lf">
					<img src="@as/img/zuzhi_wode_ha@2x.png" alt=""> 
					<span>我的会议</span>
				</div>
				<div class="fg"></div>
				<div class="rf" @click="organizationLife_two">
					<img src="@as/img/zuzhi_wode_qianbi@2x.png" alt="">
					<span>会议纪要</span>
				</div>
			</div>
			<!--<mu-expand-transition>-->
				<mu-container class="mu-container" v-show="show3">
					<!--<mu-expand-transition>-->
							<div>
								<div class="mu-transition-box mu-primary-color mu-inverse" >
										<div class="inform">
											<span>组织生活</span>
											<img src="@as/img/zuzhi_wode_del@2x.png" alt="" @click="vanishs">
										</div>
										<div class="cd">
											<div v-for="(item,index) in menuList" :key="index" @click="menuMsg(item.id)">
												<span>{{item.name}}</span>
											</div>
										</div>
								</div>
							</div>
						<!--</mu-expand-transition>-->
				</mu-container>
			<!--</mu-expand-transition>-->

		</mu-load-more>
		<!--v-if="is_edit==1"-->
		<img class="fabu_img" v-if="is_edit==1"   @click.stop="showPanel" src="@as/img/propagandaIcon/xuanchuan_fabu_icon@2x.png" alt="">
	</div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
	import LyTab from "@cp/index";
	export default {
			components: {
					LyTab,
                	Loading
			},
			data() {
				return {
					loaded:'加載更多...',
					notMore:true,
					p:1,
					page:7,
					is_edit:'',
					selectedId: 0,
					bottomSelectedId: 0,
                    loading: false,
                    loadOver:false,
					items: [
						{ label: "待参加", org_type: "0" },
						{ label: "已结束", org_type: "1" }
					],
					options: {
						activeColor: "#333",
        		color: "#999"
					},
								
					class_id: "",
					toStayInList: [],//待参加
					overList: [],//已结束
					menuList: [],//筛选分类
					tab:0,
					show3: false,
					shous:false,
					note: {
						backgroundImage: "url(" + require("@as/img/zuzhi_wode_shenghuo@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100% 100%",
					},
					bj: {
						backgroundImage: "url(" + require("@as/img/zuzhi_wode_rq@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100% ",
					},
				}
			},
			mounted() {
				this.$progress.done();
			},
			methods: {
                showPanel(){
                    this.$router.push({path: "/organization/newSummary"})
				},
				handleChange(item, index) { 
					console.log(item, index);
				},
				// 会议详情
				meetingDetails (item) {
					this.$router.push({ path: '../organization/meetingDetails' , query: item }) 
				},
				// 会议纪要
				//  this.$router.push("city?hb_val=" + this.hb_val);
	      		organizationLife_two:function(){
	//         			 this.$router.push("../organization/organizationLife_two?is_edit=" + this.is_edit)
						  this.$router.replace({
							  path:"../organization/organizationLife_two?is_edit=" + this.is_edit
						  })
				},
				vanishs: function() {
					this.show3 = false;
				},
				Oclicks: function() {
					this.show3 = true;
				},
				menuMsg: function(id) {
					// debugger
					this.class_id = id;
					this.p=1;
					this.tabChange(this.p,this.class_id);
					this.vanishs();
				},
				// 党的会议分类 
				async getMeetingclass () {  
					let that = this;
					try {
						let params = {
							org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
						}
						const url = `/app/meeting/meetingclass`
						let res = await that.$http.get(url, params) 
						that.$progress.done()
						if (res.code === 200) {
							that.menuList = res.data;
							// console.log( res.data)
							that.menuMsg(0);
						}
					} catch (e) {
						console.log('​catch -> e', e)  
					}
				},
				tabChange(p,e) {
                    // alert(this.selectedId)
					let that = this;
					that.toStayInList = [];
					that.notMore =false;
					that.loading =false;
					console.log(e)
					that.$http
						.get("/app/meeting/index", {
							uid: JSON.parse(Cookies.get('user_71ydj')).id,
							type:this.selectedId,
							p: this.p,
							page: that.page,
							class_id:that.class_id
						})
						.then(res => {
							// 将is_edit存入缓存
							localStorage.setItem("LC_id", res.data.is_edit);
							this.is_edit =res.data.is_edit;
							console.log(res.data.list)
							// if (res.data.list.length == 0) {
							// 	that.loaded = "没有更多";
							// 	that.loading = true;
							// 	that.notMore = false;
							// 	return;
							// }
							// that.toStayInList.push(...res.data.list);
							// if (res.data.list.length < 10) {
							// 	that.loaded = "没有更多了";
							// 	that.notMore = false;
							// 	return;
							// }

                            if(res.data.list.length){
                                this.toStayInList.push(...res.data.list);
                            }
                            console.log( this.toStayInList)
                            this.loadOver =false;
                            if(this.p!=1){
                                console.log(this.p);
                                console.log(res.data);
                                if(res.data.list.length){
                                }else{
                                    this.loadOver =true;
                                    this.loading =false;
                                    this.loaded='没有更多数据了'
                                    return false
                                }
                            }else {
                                if(!res.data.list.length){
                                    this.notMore =true;
                                    this.loadOver =false;
                                }else{
                                    if(res.data.list.length<7&&res.data.list.length!=0){
                                        this.loadOver =true;
                                        this.loaded='没有更多数据了';

                                    }
                                }
                            }





						});
				},
				load() {
                    if (!this.loadOver) {
                        this.loading = true;
                        clearTimeout(this.method);
                        this.method = setTimeout(() => {
                            this.p = this.p + 1;
                            this.tabChange(this.p,this.class_id);
                            this.loading = false;
                        }, 2000);
                    }
					// this.loading = true;
					// if (this.notMore) {
					// 	clearTimeout(this.method);
					// 	this.method = setTimeout(() => {
					// 		this.p = this.p + 1;
					// 		this.tabChange();
					// 	}, 500);
					// }
				},
			},
		created(){
			this.getMeetingclass();
		}
	}
</script>


<style scoped>
	.organizationPge	.mu-load-more{
		min-height:100vh;
		overflow: auto !important;
		padding: 0 0 15px 0!important;
	}
	
</style>
<style scoped lang="scss">
	 /deep/.ly-tab-active-bar {
        background:-webkit-linear-gradient(left,#eb4e44,#f47447);
		background:-o-linear-gradient(right,#eb4e44,#f47447);
		background:-moz-linear-gradient(right,#eb4e44,#f47447);
		background:linear-gradient(to right,#eb4e44,#f47447);
		border-radius: 10px;
    }
	.mu-transition-row {
		margin-top: 16px;
		min-height: 100px;
	}
	.mu-container{
		width:calc(100% + 17px);
		margin-left: -8.5px;
		margin-right: -8.5px;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.2); 
		z-index: 99999;
		transition: all .5s;
	}
	.mu-transition-box {
		background: #FFF;
		width: 100%;
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 1s ease-in 1s;
		.inform{
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 25px;
			span{
				font-size: 28px;
				color:#000;
				font-weight: bold;
			}
			img{
				width:14.5px;
				height:14.5px;
			}
		}
		.cd{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 32px;
			div{
				width:48%;
				height:30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #f8f8f8;
				border-radius: 3px;
				margin-bottom: 10px;
				span{
					font-size: 12px;
					color:#666;
				}
			}
		}
	}



</style>

<style scoped>
.ly-tab .ly-tab-active-bar{
		background:-webkit-linear-gradient(left,#eb4e44,#f47447);
		background:-o-linear-gradient(right,#eb4e44,#f47447);
		background:-moz-linear-gradient(right,#eb4e44,#f47447);
		background:linear-gradient(to right,#eb4e44,#f47447);
		border-radius: 10px;
}
</style>

<style scoped lang="scss">
  .note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		position: relative;
	}
	.inform{
		width:100%;
		display: flex;
		justify-content: space-between; 
		align-items: center;
		margin-top: 25px;
		span{
			font-size: 28px;
			color:#000;
			font-weight: bold;
		}
		.menu{
			width:55px;
			height:22.5px;
			background: #666;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				width:13.5px;
				height:12.5px;
				font-weight: normal;
			}
			span{
				font-size: 10px;
				color: #FFF;
				margin-left: 1px;
			}
		}
	}
	.learnIndex{
		display: flex;
		justify-content: flex-start;
		width:auto;
		margin-left: -15px;
		element.style{
			background-color:red !important;
		}
	}
	.list{
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 0;
		top:165px;
		z-index: 99;
		margin-bottom: 50px;
		.ol{
			width:100%;
			.bar{
				width:100%;
				height:125px;
				box-shadow: 0px 6px 15px 2px #f1f1f1;
				padding: 15px 15px;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 15px;
				background: #fff;
				border-radius: 5px;
				display: flex;
				align-items: center;
				div{
					width:100%;
					// height:63px;
					display: flex;
					align-items: center;
					.time{
						width:20%;
						height:62.5px;
						box-shadow: 0 0 5px 2px #f3f3f3;
						border-radius: 5px;
						display: flex;
						justify-content: center;
						align-items: center;
						.bj{
							width:53px;
							height:51.5px;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 2px 0;
							.year{
								font-size: 8px;
								color: #FFF;
							}
							.day{
								font-size: 30px;
								color: #FFF;
								font-weight: bold;
								display: inline-block;
								line-height: 23px;
							}
						}
					}
					.info{
						width:70%;
						height:100%;
						display: flex;
						flex-direction: column;
						margin-left: 4%;
						.title{
							width:100%;
							// height:39px;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							p{
								font-size: 14px;
								color: #333;
								display: inline-block;
								line-height: 1.5;
								margin: 0;
								padding: 0;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
						.rq{
							width:100%;
							height:15px;
							display: flex;
							justify-content: space-between;
							margin-top: 10px;
							p{
								color: #999;
								font-size: 12px;
								margin: 0;
								padding: 0;
							}
						}
					}
					.pic{
						width:6%;
						height:100%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						img{
							width:8px;
							height:13.5px;
						}
					}
				}
			}
		}
		.loading {
			width: 343px;
			margin: 0 16px ;
			font-size: 14px;
			color: #dddddd;
			clear: both;
			line-height: 61px;
			text-align: center;
			.notPageOne{
				margin-top: -50px;
			}
		}
	}
	.tab{
			width:100%;
			padding: 15px 15px;
			box-sizing: border-box;
			margin-top:135px;
			position: fixed;
			left:0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 100;
			background: #FFF;
			box-shadow: 0 0.16rem 0.4rem 0.05333rem #f1f1f1;
			.lf{
				width:40%;
				display: flex;
				justify-content: center;
				align-items: center;
				img{
					width:15px;
					height:15px;
				}
				span{
					font-size: 16px;
					color: #eb4d44;
					margin-left: 3px;
				}
			}
			.fg{
				width:1px;
				height:20px;
				background: #ccc;
			}
			.rf{
				width:40%;
				display: flex;
				justify-content: center;
				align-items: center;
				img{
					width:15px;
					height:15px;
				}
				span{
					font-size: 16px;
					color: #999;
					margin-left: 3px;
				}
			}
		}
/* 弹窗 */
.mebs {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2); 
  z-index: 99999;
	.boxts {
		background: #FFF;
		width: 100%;
		position: fixed;
		padding: 15px 15px;
		box-sizing: border-box;
		left: 0;
		top: 0;
		z-index: 999999;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 1s ease-in 1s;
		.back{
			width:100%;
			display: flex;
			justify-content: flex-start;
			img{
				width:12px;
				height:21.5px;
			}
		}
		.inform{
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 25px;
			span{
				font-size: 28px;
				color:#000;
				font-weight: bold;
			}
			img{
				width:14.5px;
				height:14.5px;
			}
		}
		.cd{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 32px;
			div{
				width:48%;
				height:30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #f8f8f8;
				border-radius: 3px;
				margin-bottom: 10px;
				span{
					font-size: 12px;
					color:#666;
				}
			}
		}
	}
}

	
</style>
<style scoped lang="scss">
div  .mu-tabs{
  position: relative;
  z-index: 97;
  height: 40px;
  margin-bottom: 15px;
	background: none!important;
	margin-top: 40px;
}
div   .mu-tab-link-highlight {
  width:16px !important;
  height:4px !important;
  background:rgba(244,117,72,1);
  border-radius:2px;
  margin-left: 28px;
}
div  .mu-tab{
  font-size:14px;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:#333;
}
div  .mu-tab-active{
  font-size:18px;
  font-family:PingFang-SC-Medium;
  font-weight:bold;
  color:#333;
}
.fabu_img {
	position: fixed;
	bottom: 70px;
	width: 43px;
	height: 43px;
	right: 10px;
	z-index: 999;
}
.mu-load-more /deep/ .mu-circle-spinner{
	border-color: #e5e5e5;
}
.organizationPge /deep/ .mu-infinite-scroll{
	display: none;
	height: 0;
}
.organizationPge /deep/.mu-elevation-1{
	box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
	-webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
}
.organizationPge  .empty-text-wrap{
	width: 100%;
	height: 40vh;
	margin-top: 100px;
}
</style>
